<template>
  <!-- 用户信息界面组件 -->
  <el-card class="user-info-card">
    <template #header>
      <span>用户信息</span>
    </template>
    <el-descriptions title="用户信息" :column="3" border direction="vertical">
      <el-descriptions-item label="名称">
        {{ userInfo.username }}
      </el-descriptions-item>
      <el-descriptions-item label="手机号">
        {{ userInfo.phone }}
      </el-descriptions-item>
      <el-descriptions-item label="余额">
        {{ userInfo.balance / 100 }}元
      </el-descriptions-item>
    </el-descriptions>
    <div style="text-align: center; margin-top: 20px">
      <el-button type="primary" @click="recharge">充值余额</el-button>
      <el-button type="primary" @click="logout">退出登录</el-button>
      <el-button type="danger" @click="deleted">注销账号</el-button>
    </div>
  </el-card>
  <recharge-form ref="rechargeFormRef" @reload="getUserInfo" />
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

const userInfo = ref({});

const getUserInfo = async () => {
  let result = await proxy.Request({
    url: proxy.Api.getUserInfo,
  });
  if (!result) {
    return;
  }
  userInfo.value = result.data;
};
getUserInfo();

import RechargeForm from "./RechargeForm.vue";
const rechargeFormRef = ref(null);
const recharge = () => {
  rechargeFormRef.value.show();
};

const logout = () => {
  proxy.Confirm({
    message: "确定退出当前账号吗？",
    okFun: () => {
      localStorage.removeItem("token");
      proxy.Message.success("退出成功");
      router.push("/login");
    },
  });
};

const deleted = async () => {
  proxy.Confirm({
    message: "确定注销当前账号吗？",
    okFun: async () => {
      let result = await proxy.Request({
        method: "put",
        url: proxy.Api.updateInfo,
        params: {
          isDeleted: true,
        },
      });
      if (!result) {
        return;
      }
      proxy.Message.success("注销成功");
      router.push("/login");
    },
  });
};
</script>

<style lang="scss" scoped>
.user-info-card {
  max-width: 600px;
  margin: 20px auto;
}

.el-descriptions {
  margin-bottom: 20px;
}
</style>
